<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>米事见 - 热点舆情监测平台</title>
    <meta content="Responsive admin theme build on top of Bootstrap 4" name="description">

    <link href="static/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <!-- C3 charts css -->
    <link href="static/css/c3.min.css" rel="stylesheet" type="text/css">
    <!-- Table css -->
    <link href="static/css/rwd-table.min.css" rel="stylesheet" type="text/css" media="screen">

    <link href="static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="static/css/metismenu.min.css" rel="stylesheet" type="text/css">
    <link href="static/css/icons.css" rel="stylesheet" type="text/css">
    <link href="static/css/style.css" rel="stylesheet" type="text/css">

    <!-- 引入ECharts库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>

</head>

<body>

    <div class="header-bg">
        <!-- Navigation Bar-->
        <header id="topnav">
            <div class="topbar-main">
                <div class="container-fluid">
                    <!-- Logo-->
                    <div>
                        <a href="index.html" class="logo">
                            <img src="static/picture/logo-dark.png" class="logo-lg" alt="" height="22">
                        </a>
                    </div>
                    <!-- End Logo-->

                    <div class="menu-extras topbar-custom navbar p-0">

                        <!-- Search input -->
                        <div class="search-wrap" id="search-wrap">
                            <div class="search-bar">
                                <input class="search-input" type="search" placeholder="Search">
                                <a href="#" class="close-search toggle-search" data-target="#search-wrap">
                                    <i class="mdi mdi-close-circle"></i>
                                </a>
                            </div>
                        </div>

                        <ul class="navbar-right ml-auto list-inline float-right mb-0">

                            <li class="list-inline-item dropdown notification-list d-none d-md-inline-block">
                                <a class="nav-link waves-effect toggle-search" href="#" data-target="#search-wrap">
                                    <i class="fas fa-search noti-icon"></i>
                                </a>
                            </li>

                            <!-- language-->
                            <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                                <a class="nav-link dropdown-toggle arrow-none waves-effect" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                    <img src="static/picture/cn_flag.jpg" class="mr-2" height="12" alt=""> 中文 <span class="mdi mdi-chevron-down"></span>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated language-switch">
                                    <a class="dropdown-item" href="#"><img src="static/picture/french_flag.jpg" alt="" height="16"><span> French </span></a>
                                    <a class="dropdown-item" href="#"><img src="static/picture/spain_flag.jpg" alt="" height="16"><span> Spanish </span></a>
                                    <a class="dropdown-item" href="#"><img src="static/picture/russia_flag.jpg" alt="" height="16"><span> Russian </span></a>
                                    <a class="dropdown-item" href="#"><img src="static/picture/germany_flag.jpg" alt="" height="16"><span> German </span></a>
                                    <a class="dropdown-item" href="#"><img src="static/picture/italy_flag.jpg" alt="" height="16"><span> Italian </span></a>
                                </div>
                            </li>

                            <!-- full screen -->
                            <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                                <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                    <i class="fas fa-expand noti-icon"></i>
                                </a>
                            </li>

                            <!-- notification -->
                            <li class="dropdown notification-list list-inline-item">
                                <a class="nav-link dropdown-toggle arrow-none waves-effect" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                    <i class="fas fa-bell noti-icon"></i>
                                    <span class="badge badge-pill badge-danger noti-icon-badge">3</span>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated dropdown-menu-lg px-1">
                                    <!-- item-->
                                    <h6 class="dropdown-item-text">
                                            Notifications
                                        </h6>
                                    <div class="slimscroll notification-item-list">
                                        <!-- item-->
                                        <a href="javascript:void(0);" class="dropdown-item notify-item active">
                                            <div class="notify-icon bg-success"><i class="mdi mdi-cart-outline"></i></div>
                                            <p class="notify-details"><b>Your order is placed</b><span class="text-muted">Dummy text of the printing and typesetting industry.</span></p>
                                        </a>

                                        <!-- item-->
                                        <a href="javascript:void(0);" class="dropdown-item notify-item">
                                            <div class="notify-icon bg-danger"><i class="mdi mdi-message-text-outline"></i></div>
                                            <p class="notify-details"><b>New Message received</b><span class="text-muted">You have 87 unread messages</span></p>
                                        </a>

                                        <!-- item-->
                                        <a href="javascript:void(0);" class="dropdown-item notify-item">
                                            <div class="notify-icon bg-info"><i class="mdi mdi-filter-outline"></i></div>
                                            <p class="notify-details"><b>Your item is shipped</b><span class="text-muted">It is a long established fact that a reader will</span></p>
                                        </a>

                                        <!-- item-->
                                        <a href="javascript:void(0);" class="dropdown-item notify-item">
                                            <div class="notify-icon bg-success"><i class="mdi mdi-message-text-outline"></i></div>
                                            <p class="notify-details"><b>New Message received</b><span class="text-muted">You have 87 unread messages</span></p>
                                        </a>

                                        <!-- item-->
                                        <a href="javascript:void(0);" class="dropdown-item notify-item">
                                            <div class="notify-icon bg-warning"><i class="mdi mdi-cart-outline"></i></div>
                                            <p class="notify-details"><b>Your order is placed</b><span class="text-muted">Dummy text of the printing and typesetting industry.</span></p>
                                        </a>

                                    </div>
                                    <!-- All-->
                                    <a href="javascript:void(0);" class="dropdown-item text-center notify-all text-primary">
                                            View all <i class="fi-arrow-right"></i>
                                        </a>
                                </div>
                            </li>

                            <li class="dropdown notification-list list-inline-item">
                                <div class="dropdown notification-list nav-pro-img">
                                    <a class="dropdown-toggle nav-link arrow-none waves-effect nav-user" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                                        <img src="static/picture/user-1.jpg" alt="user" class="rounded-circle">
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown">
                                        <!-- item-->
                                        <a class="dropdown-item" href="#"><i class="mdi mdi-account-circle"></i> Profile</a>
                                        <a class="dropdown-item" href="#"><i class="mdi mdi-wallet"></i> My Wallet</a>
                                        <a class="dropdown-item d-block" href="#"><span class="badge badge-success float-right">11</span><i class="mdi mdi-settings"></i> Settings</a>
                                        <a class="dropdown-item" href="#"><i class="mdi mdi-lock-open-outline"></i> Lock screen</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item text-danger" href="#"><i class="mdi mdi-power text-danger"></i> Logout</a>
                                    </div>
                                </div>
                            </li>

                            <li class="menu-item dropdown notification-list list-inline-item">
                                <!-- Mobile menu toggle-->
                                <a class="navbar-toggle nav-link">
                                    <div class="lines">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </div>
                                </a>
                                <!-- End mobile menu toggle-->
                            </li>

                        </ul>

                    </div>
                    <!-- end menu-extras -->

                    <div class="clearfix"></div>

                </div>
                <!-- end container -->
            </div>
            <!-- end topbar-main -->

            <!-- start content -->
            <div class="bg-dark">
                <div class="container-fluid">
                    <div class="row align-items-center ">
                        <div class="col-md-8">
                            <div class="page-title-box">
                                <h4 class="page-title">话题</h4>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">
                                        <a href="javascript:void(0);">首页</a>
                                    </li>
                                    <li class="breadcrumb-item">
                                        <a href="javascript:void(0);">内容分析</a>
                                    </li>
                                    <li class="breadcrumb-item active">话题</li>
                                </ol>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="float-right d-none d-md-block app-datepicker">
                                <input type="text" class="form-control" data-date-format="MM dd, yyyy" readonly="readonly" id="datepicker">
                                <i class="mdi mdi-chevron-down mdi-drop"></i>
                            </div>
                        </div>
                    </div>

                    <div class="row top-content">
                        <div class="col-sm-6 col-xl-3">
                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">Total Expenses</h5>
                                    <h4 class="text-info pt-1 mb-0">$67,670</h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart1"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xl-3">
                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">Total Invoice</h5>
                                    <h4 class="text-warning pt-1 mb-0">$7,360</h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart2"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xl-3">
                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">Amount Due</h5>
                                    <h4 class="text-primary pt-1 mb-0">$5000</h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart3"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-xl-3">

                            <div class="row align-items-center p-1">
                                <div class="col-lg-6">
                                    <h5 class="font-16 text-white">Unpaid Invoices</h5>
                                    <h4 class="text-danger pt-1 mb-0">$2,480</h4>
                                </div>
                                <div class="col-lg-6">
                                    <div id="chart4"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end content -->

            <!-- MENU Start -->
            <div class="navbar-custom">
                <div class="container-fluid">

                    <div id="navigation">

                        <!-- Navigation Menu-->
                        <ul class="navigation-menu">

                            <li class="has-submenu">
                                <a href="index.html"><i class="dripicons-meter"></i> 首页</a>
                            </li>

                            <li class="has-submenu">
                                <a href="contents.html"><i class="dripicons-briefcase"></i> 内容分析</a>
                                <ul class="submenu">
                                            <li><a href="contents.html">帖子</a></li>
                                            <li><a href="topicresearch.html">话题</a></li>
                                </ul>
                            </li>

                            <li class="has-submenu">
                                <a href="blogger.html"><i class="dripicons-broadcast"></i> 权威博主</a>
                                <!-- <ul class="submenu">
                                            <li><a href="blogger.html">权威博主</a></li>
                                            <li><a href="sentiment-graph.html">舆情拓扑</a></li>
                                </ul> -->
                            </li>

                            <li class="has-submenu">
                                <a href="user.html"><i class="dripicons-view-thumb"></i> 用户分析</a>
                                <!-- <ul class="submenu">
                                            <li><a href="user.html">用户分析</a></li>
                                            <li><a href="#">暂无</a></li>
                                            <li><a href="#">暂无</a></li>
                                </ul> -->
                            </li>
                        </ul>
                        <!-- End navigation menu -->
                    </div>
                    <!-- end #navigation -->
                </div>
                <!-- end container -->
            </div>
            <!-- end navbar-custom -->
        </header>
        <!-- End Navigation Bar-->

    </div>
    <!-- header-bg -->

    <div class="wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">

                            <h4 class="mt-0 header-title">话题TOP10榜</h4>
                            <p class="sub-title">This is an experimental awesome solution for responsive tables with complex data.</p>

                            <div class="table-rep-plugin">
                                <div class="table-responsive b-0" data-pattern="priority-columns">
                                    <table id="tech-companies-1" class="table  table-striped">
                                        <thead>
                                            <tr>
                                                <th>Company</th>
                                                <th data-priority="1">Last Trade</th>
                                                <th data-priority="3">Trade Time</th>
                                                <th data-priority="1">Change</th>
                                                <th data-priority="3">Prev Close</th>
                                                <th data-priority="3">Open</th>
                                                <th data-priority="6">Bid</th>
                                                <th data-priority="6">Ask</th>
                                                <th data-priority="6">1y Target Est</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <th>GOOG <span class="co-name">Google Inc.</span></th>
                                                <td>597.74</td>
                                                <td>12:12PM</td>
                                                <td>14.81 (2.54%)</td>
                                                <td>582.93</td>
                                                <td>597.95</td>
                                                <td>597.73 x 100</td>
                                                <td>597.91 x 300</td>
                                                <td>731.10</td>
                                            </tr>
                                            <tr>
                                                <th>AAPL <span class="co-name">Apple Inc.</span></th>
                                                <td>378.94</td>
                                                <td>12:22PM</td>
                                                <td>5.74 (1.54%)</td>
                                                <td>373.20</td>
                                                <td>381.02</td>
                                                <td>378.92 x 300</td>
                                                <td>378.99 x 100</td>
                                                <td>505.94</td>
                                            </tr>
                                            <tr>
                                                <th>AMZN <span class="co-name">Amazon.com Inc.</span></th>
                                                <td>191.55</td>
                                                <td>12:23PM</td>
                                                <td>3.16 (1.68%)</td>
                                                <td>188.39</td>
                                                <td>194.99</td>
                                                <td>191.52 x 300</td>
                                                <td>191.58 x 100</td>
                                                <td>240.32</td>
                                            </tr>
                                            <tr>
                                                <th>ORCL <span class="co-name">Oracle Corporation</span></th>
                                                <td>31.15</td>
                                                <td>12:44PM</td>
                                                <td>1.41 (4.72%)</td>
                                                <td>29.74</td>
                                                <td>30.67</td>
                                                <td>31.14 x 6500</td>
                                                <td>31.15 x 3200</td>
                                                <td>36.11</td>
                                            </tr>
                                            <tr>
                                                <th>MSFT <span class="co-name">Microsoft Corporation</span></th>
                                                <td>25.50</td>
                                                <td>12:27PM</td>
                                                <td>0.66 (2.67%)</td>
                                                <td>24.84</td>
                                                <td>25.37</td>
                                                <td>25.50 x 71100</td>
                                                <td>25.51 x 17800</td>
                                                <td>31.50</td>
                                            </tr>
                                            <tr>
                                                <th>CSCO <span class="co-name">Cisco Systems, Inc.</span></th>
                                                <td>18.65</td>
                                                <td>12:45PM</td>
                                                <td>0.97 (5.49%)</td>
                                                <td>17.68</td>
                                                <td>18.23</td>
                                                <td>18.65 x 10300</td>
                                                <td>18.66 x 24000</td>
                                                <td>21.12</td>
                                            </tr>
                                            <tr>
                                                <th>YHOO <span class="co-name">Yahoo! Inc.</span></th>
                                                <td>15.81</td>
                                                <td>12:25PM</td>
                                                <td>0.11 (0.67%)</td>
                                                <td>15.70</td>
                                                <td>15.94</td>
                                                <td>15.79 x 6100</td>
                                                <td>15.80 x 17000</td>
                                                <td>18.16</td>
                                            </tr>
                                            <!-- Repeat -->
                                            <tr>
                                                <th>GOOG <span class="co-name">Google Inc.</span></th>
                                                <td>597.74</td>
                                                <td>12:12PM</td>
                                                <td>14.81 (2.54%)</td>
                                                <td>582.93</td>
                                                <td>597.95</td>
                                                <td>597.73 x 100</td>
                                                <td>597.91 x 300</td>
                                                <td>731.10</td>
                                            </tr>
                                            <tr>
                                                <th>AAPL <span class="co-name">Apple Inc.</span></th>
                                                <td>378.94</td>
                                                <td>12:22PM</td>
                                                <td>5.74 (1.54%)</td>
                                                <td>373.20</td>
                                                <td>381.02</td>
                                                <td>378.92 x 300</td>
                                                <td>378.99 x 100</td>
                                                <td>505.94</td>
                                            </tr>
                                            <tr>
                                                <th>AMZN <span class="co-name">Amazon.com Inc.</span></th>
                                                <td>191.55</td>
                                                <td>12:23PM</td>
                                                <td>3.16 (1.68%)</td>
                                                <td>188.39</td>
                                                <td>194.99</td>
                                                <td>191.52 x 300</td>
                                                <td>191.58 x 100</td>
                                                <td>240.32</td>
                                          
                                            
                                        </tbody>
                                    </table>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
                <!-- end col -->
            </div>
            <!-- end row -->
            
            <div class="row">
                
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="mt-0 header-title">话题分类</h4>
                            <p class="sub-title">Display as Bar Chart.</p>

                            <div id="treemap" style="width: 100%; height: 400px;"></div>

                            <script>
                              // 初始化echarts实例
                              var myChart = echarts.init(document.getElementById('treemap'));
                            
                              // 配置treemap图表的数据和样式
                              var option = {
                                series: {
                                  type: 'treemap',
                                  data: [{
                                    name: '主节点',
                                    children: [
                                      { name: '子节点1', value: 100 },
                                      { name: '子节点2', value: 200 },
                                      {
                                        name: '主节点2',
                                        children: [
                                          { name: '子节点3', value: 300 },
                                          { name: '子节点4', value: 300 },
                                          {
                                        name: '主节点3',
                                        children: [
                                          { name: '子节点5', value: 300 },
                                          { name: '子节点6', value: 300 }
                                        ]
                                      }
                                    ]
                                  }]
                                }]
                              }};
                            
                              // 使用配置渲染treemap图表
                              myChart.setOption(option);
                            </script>
                        </div>
                    </div>
                </div>
                <!-- end col -->
            </div>
            <!-- end row -->
            <div class="search-container">
                <h4 class="keyword-title">关键词搜索</h4>
            <div class="search-container">
                <div class="search-box">
                    <input type="text" class="search-input" placeholder="输入想查找的关键词">
                    <button class="search-button">搜索</button>
                </div>
                
                <div class="search-results">
                    <h4 class="search-header">Search Results</h4>
                    <p class="sub-title">Display search results below.</p>
                    
                    <div class="table-plugin">
                        <div class="table-responsive" data-pattern="priority-columns">
                            <table id="search-results" class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Result</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Display search results here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            
           

    <!-- Footer -->
    <!-- <footer class="footer">
        Copyright &copy; 2022.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
    </footer> -->

    <!-- End Footer -->

    <!-- jQuery  -->
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.bundle.min.js"></script>
    <script src="static/js/jquery.slimscroll.js"></script>
    <script src="static/js/waves.min.js"></script>

    <script src="static/js/apexcharts.min.js"></script>
    <script src="static/js/bootstrap-datepicker.min.js"></script>
    <!--C3 Chart-->
    <script src="static/js/d3.min.js"></script>
    <script src="static/js/c3.min.js"></script>
    <script src="static/js/c3-chart-init.js"></script>
     <!-- Responsive-table-->
     <script src="static/js/rwd-table.min.js"></script>

    <!-- App js -->
    <script src="static/js/app.js"></script>
    <script>
        $(function() {
            $('.table-responsive').responsiveTable({
                addDisplayAllBtn: 'btn btn-secondary'
            });
        });
    </script>
</body>

<style>
    
    .search-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .search-box {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    .search-input {
        border: 2px solid #ccc;
        border-radius: 20px;
        padding: 8px 16px;
        width: 500px;
    }

    .search-button {
        background-color: #007bff;
        color: white;
        border: 2px solid #007bff;
        border-radius: 20px;
        padding: 8px 16px;
        margin-left: 10px;
        cursor: pointer;
    }

    .search-button:hover {
        background-color: #0056b3;
    }

    .search-results {
        width: 1000px;
    }

    .search-header {
        margin-top: 20px;
        margin-bottom: 10px;
        font-size: 24px;
    }

    .sub-title {
        font-size: 16px;
        color: #666;
        margin-bottom: 20px;
    }

    .table-plugin {
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 10px;
    }

    .table-responsive {
        overflow: auto;
    }
</style>
</style>
</html>